<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <!--<el-form-item label="排产状态" prop="mplanStatus">
        <el-select v-model="queryParams.mplanStatus" placeholder="请选择" clearable>
          <el-option v-for="dict in planStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>-->
      <el-form-item label="产地" prop="factoryId">
        <el-select v-model="queryParams.factoryId" placeholder="请选择" filterable clearable @change="factoryChange">
          <el-option v-for="team in factoryList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
        </el-select>
      </el-form-item>
      <el-form-item label="班组" prop="teamId">
        <el-select v-model="queryParams.teamId" placeholder="请选择" filterable clearable>
          <el-option v-for="team in teamList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="factoryWorkOrderList" >
      <el-table-column label="排产月份" align="center" prop="plan_month" />
      <el-table-column label="班组名称" align="center" prop="teamName" />
      <el-table-column label="工厂名称" align="center" prop="factoryName" />
      <el-table-column label="工单条数" align="center" prop="workorderCount"  width="80px"/>
      <el-table-column label="标准产能" align="center" prop="standardNum" width="80px"/>
      <el-table-column label="排产数量" align="center" prop="planNum" width="100"/>
      <el-table-column label="剩余产能" align="center" prop="rest_mplan_num" width="100"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="openMonthPlanCancel(scope.row)">取消排产</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改订单信息对话框 -->
    <el-dialog title="分厂月排产" :visible.sync="open" width="1400px" append-to-body :close-on-click-modal ="false">
      <div style="float: left;">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom: 10px">
          <!--<el-date-picker clearable
                          v-model="form.planMonth"
                          type="month"
                          value-format="yyyy-MM"
                          placeholder="选择排产月份">
          </el-date-picker>-->
          <!--<el-checkbox v-model="form.chooseMonth">下月</el-checkbox>-->
          <el-button type="primary" @click="monthPlanCancel" style="margin-left: 20px;">月排产取消</el-button>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="planWorkOrderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单合同号" align="center" prop="contractCode" />
        <el-table-column label="产品编号" align="center" prop="bomCode" />
        <el-table-column label="产品名称" align="center" prop="bomName" />
        <!--<el-table-column label="产品型号" align="center" prop="orderCode" />-->
        <el-table-column label="分单数量" align="center" prop="workerOrdernum" />
        <el-table-column label="排产数量" align="center" prop="planNum" />
        <!--<el-table-column label="分厂名称" align="center" prop="factoryName" />-->
        <el-table-column label="班组名称" align="center" prop="teamName" />
        <!--<el-table-column label="库存情况" align="center" prop="inventoryDesc" />-->
        <el-table-column label="排产开始日期" align="center" prop="planStartdate" width="100"/>
        <el-table-column label="排产完成日期" align="center" prop="planFinishdate" width="100"/>
<!--        <el-table-column label="排产开始时间" align="center" prop="mplan_start_date" width="100"/>-->
<!--        <el-table-column label="排产完成时间" align="center" prop="mplan_end_date" width="100"/>-->
<!--        <el-table-column label="产能情况" align="center" prop="capacityDesc" />-->
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { listMFactoryWorkorder,getMfactoryCanellist, listFactoryMplanWorkorder4Cancel, monthPlanCancel } from "@/api/sm/order/workorder";
import { listTeam,listFactory } from "@/api/system/dept";

export default {
  name: "Orderinfo",
  dicts: ['order_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      teamSelect: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      plantotal: 0,
      //分厂待排产订单信息表格数据
      factoryWorkOrderList: [],
      //排产工单
      planWorkOrderList: [],
      //排产结果
      planResultList: [],
      factoryList: [],
      teamList: [],
      planStatusList: [
        {
          "label": "待排产",
          "value": 0
        },
        {
          "label": "排产完成",
          "value": 1
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 同步时间时间范围
      daterangeOrderDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamId: null,
        bomCode: null,
        bomName: null,
        mplanStatus: 0,
        workerConfirmstatus: 1,
        workerOrdertype: 1
      },
      // 表单参数
      form: {
        planMonth: null,
        chooseMonth: null,
        workOrderIds: null
      },
      // 表单参数
      form1: {
        planMonth: null,
        mplanList: null
      },
      // 表单校验
      rules: {

      }
    };
  },
  created() {
    this.getList();
    this.getFactoryList();
  },
  methods: {
    getOptionLabel(item) {
      return `${item.deptName}`;
    },
    handleDisable(row, index) {
      if (row.mplanStatus == '1') {
        return false
      } else {
        return true
      }
    },
      /** 查询订单信息列表 */
    getFactoryList() {
      this.loading = true;
      listFactory({"level":2}).then(response => {
        this.factoryList = response.data;
        this.loading = false;
      });
    },
    factoryChange(){
      this.getTeamList(this.queryParams.factoryId);
    },
    /** 查询订单信息列表 */
    getTeamList(parentId) {
      this.loading = true;
      listTeam({"parentId":parentId}).then(response => {
        this.teamList = response.data;
        this.loading = false;
      });
    },

    /** 查询订单信息列表 */
    getList() {
      this.loading = true;
      getMfactoryCanellist(this.queryParams).then(response => {
        this.factoryWorkOrderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        planChooseMonth: null,
        workOrderIds: null
      };
      this.resetForm("form");
    },
    reset1() {
      this.form1 = {
        planMonth: null,
        mplanList: null
      };
      this.resetForm("form1");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.queryParams.teamId!=null && this.queryParams.teamId!=undefined){
        this.teamSelect = false;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeOrderDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    openMonthPlanCancel(row) {
      this.loading = true;
      listFactoryMplanWorkorder4Cancel({ "plan_month": row.plan_month,"teamId":row.teamId }).then(response => {
        this.planWorkOrderList = response.data;
        this.open = true;
        this.loading = false;
      });
    },
    monthPlanCancel() {
      if (this.ids.length === 0) {
        this.$modal.msgError("请选择需要取消的数据");
        return;
      }
      this.loading = true;
      this.$modal.confirm(`确认要取消 \n [${this.ids.length}]条 \n 月排产吗？`).then(() => {
        monthPlanCancel({ "ids": this.ids + '' }).then(response => {
          this.loading = false;
          this.$modal.msgSuccess("取消成功");
          this.open = false;
          this.getList();
        }).catch(()=>{
          this.loading = false;
        });
      }).then(() => {
        this.getList();
      }).catch(() => {
        this.loading = false;
      });
    },

    handPlanRemoveOrder(row) {
      const id = row.id
      this.planWorkOrderList.map((item, index) => {
        if (item.id == id)
          this.planWorkOrderList.splice(index, 1);//index 当前元素索引；1：需要删除的元素个数
      });
    },

    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
      return `${year}-${month.toString().padStart(2, '0')}`;
    },

  }
};
</script>
